<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class = "container">
	<div class="row">
		<h1>h1. 排版</h1>
		<h2>h2. Bootstrap heading</h2>
		<h3>h3. Bootstrap heading</h3>
		<h4>h4. Bootstrap heading</h4>
		<h5>h5. Bootstrap heading</h5>
		<h6>h6. Bootstrap heading</h6>
		
		<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
		<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
		<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
		<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
		<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
		<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
	    <p class="text-lowercase">Lowercased text.</p>
	    <p class="text-uppercase">Uppercased text.</p>
	    <p class="text-capitalize">Capitalized text.</p>
		<p>=====================地址======================</p>
		<address>
		  <strong>Twitter, Inc.</strong><br>
		  1355 Market Street, Suite 900<br>
		  San Francisco, CA 94103<br>
		  <abbr title="Phone">P:</abbr> (123) 456-7890
		</address>
		
		<address>
		  <strong>Full Name</strong><br>
		  <a href="mailto:#">first.last@example.com</a>
		</address>
	</div>
    <div class = "row">
       <h1>表格</h1>
        <table class = "table table-striped table-bordered table-hover table-condensed">
           <thead>
               <tr>
                   <th>#</th>
                   <th>First Name</th>
                   <th>Last Name</th>
                   <th>Age</th>
               </tr>
          </thead>
           <tbody>
            <tr class="danger">
                <td>1</td>
                <td>wen</td>
                <td>yao</td>
                <td>18</td>
            </tr  >
              <tr class="warning">
                <td>2</td>
                <td>wen</td>
                <td>yao</td>
                <td>18</td>
            </tr>
              <tr>
                <td>3</td>
                <td>wen</td>
                <td>yao</td>
                <td>18</td>
            </tr>
           </tbody>
        </table>
    </div>
	<div class="row">
		<div class="col-xs-6">
		<form>
		  <div class="form-group">
		    <label for="exampleInputEmail1">Email address</label>
		    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1">Password</label>
		    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		  </div>
		  <div class="form-group">
		    <label >Tel</label>
		    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputFile">File input</label>
		    <input type="file" id="exampleInputFile">
		    <p class="help-block">Example block-level help text here.</p>
		  </div>
		  <div class="checkbox">
		    <label>
		      <input type="checkbox"> Check me out
		    </label>
		  </div>
		  <button type="submit" class="btn btn-default">Submit</button>
		</form>
		</div>
	</div>
	<div class = "row">
		<form class="form-inline">
		  <div class="form-group">
		    <label for="exampleInputName2">Name</label>
		    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputEmail2">Email</label>
		    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
		  </div>
		  <button type="submit" class="btn btn-default">Send invitation</button>
		</form>
	</div>
	<div  class="row">
		<h1>=====按钮================</h1>
		<button  class="btn btn-default">按钮</button>
		<a class="btn btn-default" href="#" role="button">Link</a>
		<button class="btn btn-default" type="submit">Button</button>
		<input class="btn btn-default" type="button" value="Input">
		<input class="btn btn-default" type="submit" value="Submit">
		<!-- Standard button -->
		<button type="button" class="btn btn-default">（默认样式）Default</button>
		
		<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
		<button type="button" class="btn btn-primary">（首选项）Primary</button>
		
		<!-- Indicates a successful or positive action -->
		<button type="button" class="btn btn-success">（成功）Success</button>
		
		<!-- Contextual button for informational alert messages -->
		<button type="button" class="btn btn-info">（一般信息）Info</button>
		
		<!-- Indicates caution should be taken with this action -->
		<button type="button" class="btn btn-warning">（警告）Warning</button>
		
		<!-- Indicates a dangerous or potentially negative action -->
		<button type="button" class="btn btn-danger">（危险）Danger</button>
		
		<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
		<button type="button" class="btn btn-link">（链接）Link</button>
	</div>
	<div class="row">
		<h1>=====图片==========</h1>
		<img class="img-circle" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599905781890&di=7c2fdc52396ee6f98bd6865358525827&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3204887199%2C3790688592%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D4610%26h%3D2968">
	</div>
</div>
</body>
</html>